<template>
    <div class="person">
        <h1> 需求：水温达到 50°，或者水位 达到 20L ,则联系服务器 </h1>
        <h2 id="heat">{{temp}}°</h2>
        <h2>水位：{{height}}</h2>

        <button @click="changeHeat"> 温度+1</button>
        <button @click="changeWater"> 水位+ 10 </button>
        <br/>
        <h2>监视多个对象属性噢：person name age </h2>
        <button @click="changeName">修改名称</button>
        <button @click="changeAge">修改年龄</button>
    </div> 
</template>

<script lang="ts" setup name = "person">
import { ref,watch,watchEffect} from 'vue'

let temp = ref(20)
let height = ref(1)

let person = ref({
    name:'张三',
    age:18,
    sex:'男',
    car:{
        c1:"奔驰",
        c2:"布加迪"
    }
})

function changeHeat(){
    temp.value+=1;
}

function changeWater(){
    height.value+=10;
}

function changeName(){
    person.value.name+="~";
}

function changeAge(){
    person.value.age+=1
}

watch([()=>person.value.name,() => person.value.age],(newValue,oldValue)=>{
 console.log('person change ',oldValue,newValue)    
})


//使用 watch 监控 
watch([()=>temp,height],(value)=>{
     // 从value中获取最新的temp值、height值
     const [newTemp,newHeight] = value
     if(newTemp.value >= 50 || newHeight >= 20){
        console.log('联系服务器')
     }
})


//使用 watchEffect 实现
const stopWtach = watchEffect(()=>{
    //水温达到 50°，或者水位 达到 20L ,则联系服务器
    if(temp.value >= 50 || height.value >= 20){
        console.log(document.getElementById('heat')?.innerText)
        console.log('联系服务器')
    }

    // 水温达到100，或水位达到50，取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
})

</script>

<style>
.person {
    width: 100%;
    background-color: rgb(108, 15, 239);
    border-radius: 2%;
}
button{
    border: 1px burlywood ;
    border-radius: 3%;
    margin-left: 10px;
    background-color: chocolate;
}
</style>